@import '../../containers/Application/colors.scss';

$itemBackgroundColorSelected: $alabaster;
$itemBackgroundColorHover: $concrete;
$itemColorDisabled: $dustyGray;
$itemButtonBackgroundColor: $shakespeare;
$itemButtonColor: $white;

$itemHeight: 40px;

.item {
    height: $itemHeight;
    align-items: center;
    cursor: pointer;
    display: flex;

    .text {
        font-size: 12px;
        flex-grow: 1;
        width: 0;
        padding: 0 10px;
    }

    &.active {
        background: $itemBackgroundColorSelected;
        font-weight: bold;
    }

    &.disabled {
        color: $itemColorDisabled;
    }

    &.order-field-shown {
        cursor: default;
    }

    &:hover {
        background: $itemBackgroundColorHover;
    }

    .children {
        font-size: 16px;
        font-weight: normal;
        width: 25px;
    }
}

.button {
    background-color: $itemButtonBackgroundColor;
    color: $itemButtonColor;
    height: $itemHeight;
    width: 40px;
    font-size: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    visibility: inherit;

    &:not(.visible) {
        visibility: hidden;
    }
}

.buttons {
    visibility: hidden;
}

.item:not(.disabled) {
    &:hover,
    &.selected {
        .buttons {
            visibility: visible;
        }
    }
}

.indicator {
    font-size: 16px;
    margin-right: 10px;
}

.order-input {
    margin-left: 10px;
    width: 30px;
}
